<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            box-sizing:border-box;
        }
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
        }
        main{
            background-image: url("image/背景.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position:center,center;
            width: 100%;
            height: 100vh;
            margin: 0 auto;
            padding: 60vh 0 0 0;
        }
        /*#beijing{
            width: 100%;
            height: 100%;
        }*/
        section{
            background-image: url("image/组 2.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position:center,center;
            width: 80%;
            height: 14.6875rem;
            /*position: absolute;
            left: 10%;
            bottom:20px;*/
            margin: 0 auto;
        }
        #tupian{
            position: relative;
            top: 15%;
            height: 40%;
            display: flex;
            justify-content: space-around;
            line-height: 100%;
        }
        #tupian img{
            height: 60%;
        }
        #shurukuang{
            text-align: center;
            position: relative;
            top: 10px;
        }
        .input{
            width: 80%;
            height: 25px;
            margin: 0.4375rem 0;
            border:0.0625rem solid #999;
            border-radius: 1.25rem;
            background-color: #F0EEE8;
        }
        #fasong{
            position: absolute;
            top: 62%;
            right: 12%;
            height: 20px;
            font-size: 12px;
            border-radius: 10px;
            border:0.0625rem solid #999;
        }
        #btn{
            text-align: center;
            height: 55px;
            line-height: 55px;
        }
        #button{
            width: 80%;
            margin: 0 auto;
        }
        article{
            height: 100vh;
            width: 100vw;
            background-image: url("平台下载/平台下载背景图层1@2x.png");
            padding: 141px 0 0 0;
        }
        #xiang{
            background-image: url("平台下载/矢量智能对象拷贝@2x.png");
            background-size: 100% 100%;
            width: 152.5px;
            height: 200.5px;
            margin: 0 auto;
        }
        #anzhuo{
            background-image: url("平台下载/安卓下载@2x.png");
            background-size: 100% 100%;
            margin: 120px auto 32px;
            width: 296.5px;
            height: 44px;
        }
        #IOS{
            background-image: url("平台下载/IOS下载拷贝@2x.png");
            background-size: 100% 100%;
            width: 296.5px;
            height: 44px;
            margin: 0 auto;
        }
        @media all and (min-width:660px){
            /*#beijing{
                height: 1300px;
                width: 100vw;
            }*/
            main{
                padding: 900px 0 0 0;
                height: 1300px;
                width: 100vw;
            }
            section{
                /*background: aqua;*/
                background-image: url("image/组 2.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position:center,center;
                width: 80%;
                height: 300px;
                /*position: absolute;
                left: 10%;
                bottom:20px;*/
                margin: 0 auto;
            }
            #button{
                margin: 10px 0;
                height: 100%;
            }
            article{
                height: 1300px;
                width: 100vw;
                background-image: url("平台下载/平台背景图层1@3x.png");
                /*background-size: 100vw 1300px;*/
                padding: 141px 0 0 0;
            }
            #xiang{
                background-image: url("平台下载/矢量智能对象拷贝@3x.png");
                background-size: 100% 100%;
                width: 229px;
                height: 301px;
                margin: 0 auto;
            }
            #anzhuo{
                background-image: url("平台下载/安卓下载@3x.png");
                background-size: 100% 100%;
                margin: 120px auto 32px;
                width: 445px;
                height: 66px;
            }
            #IOS{
                background-image: url("平台下载/IOS下载拷贝@3x.png");
                background-size: 100% 100%;
                width: 445px;
                height: 66px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <!--<img id="beijing" src="image/背景.png" alt="">-->
    <main>
        <section>
            <div id="tupian">
                <img src="image/hb_item.png" alt="">
                <img src="image/字.png" alt="">
            </div>
            <div id="shurukuang">
                <input class="input" id="name" type="text">
                <input class="input" id="password" type="text">
                <input type="button" id="fasong" value="发送">
            </div>
            <div id="btn">
                <img id="button" src="image/button.png" alt="">
            </div>
        </section>
    </main>
    <article>
        <!--<img id="xiang" src="平台下载/矢量智能对象拷贝@2x.png" alt="">-->
        <div id="xiang"></div>
        <!--<img id="anzhuo" src="平台下载/安卓下载@2x.png" alt="">-->
        <div id="anzhuo"></div>
        <!--<img id="IOS" src="平台下载/IOS下载拷贝@2x.png" alt="">-->
        <div id="IOS"></div>
    </article>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        $('#button').on('click',function () {
            var number = $('#name').val();
            var yanzhengma = $('#password').val();
            layer.alert('请确认,输入的手机号为:'+number
                        +'验证码为:'+yanzhengma);
        });
        // $('button').click(function () {
        //     if ($(this).attr('data-click')){
        //         layer.alert('请不要重复点击');
        //     }else{
        //         layer.alert('发送成功');
        //         $(this).attr('data-click','1');
        //     }
        // })
        var wait = 60;
        function time(o){
            if(wait == 0){
                // o.removeAttribute('disabled');
                o.value='免费获取验证码';
                wait = 60;
            }else{
                // o.setAttribute('disabled',true);
                o.value = wait + "秒后可以重新发送";
                wait--;
                setTimeout(function(){
                    time(o)
                },1000)
            }
        };
        $('#fasong').click(function(){
            time(this);
        })
    </script>
</body>
</html>